<template>
  <div class="lockc">
    <!-- <img class="locktitle" src="../../assets/locktitle.png" alt=""> -->
    <p class="locktitle">{{ platformName }}</p>
    <div class="lockbox">
      <p class="locktip">系统锁屏，请输入密码进入系统！</p>
      <div class="lockinputbox">
        <img v-if="headPortraits" alt="" :src="headPortraits"
             @click="flag = !flag">
        <img v-else src="../../assets/user_f.jpeg" alt=""
             @click="flag = !flag">
        <el-input v-model="passwd" :class="{show:flag}" type="password"
                  placeholder="请输入登录密码" @keyup.enter.native="handleLogin">
          <i slot="suffix" class="el-icon-right" :style="{'--themecolor':themecolor}"
             @click="handleLogin" />
        <!-- <el-button slot="suffix" icon="el-icon-right" circle @click="handleLogin" /> -->
        </el-input>
      </div>
      <el-link class="logout" type="primary" :underline="false"
               @click="handleLogout">重新登录</el-link>
      <div class="datatime">{{ time }}</div>
    </div>
    <div class="bottomtext">{{ footerText }}</div>
    <!-- <div class="lockc-date">
      <span>{{ time }}1</span>
      <p>
        <span>{{ monthdate }}2</span>
      </p>
    </div> -->
    <!--<div class="lock-container pull-height">
      <div class="lock-form animated bounceInDown">
        <div class="animated" :class="{'shake':passwdError,'bounceOut':pass}">
           <h3 class="text-white">{{ name }}</h3>
          <el-input v-model="passwd" placeholder="请输入登录密码" type="password" class="input-with-select animated" @keyup.enter.native="handleLogin">
            <el-button slot="append" style="padding-right:36px;" @click="handleLogin"><i class="el-icon-unlock" /></el-button>
            <el-button slot="append" @click="handleLogout"><i class="el-icon-switch-button" /></el-button>
          </el-input>
        </div>

      </div>
    </div>-->
  </div>
</template>
<script>
import { checkPwd } from '@/framework/api/dashboard'
import { encryption, decryption } from 'DQBasic-vue-component'
// import { dateFormat } from '@/framework/utils/date'
export default {
  name: 'Lock',
  data() {
    return {
      passwd: '',
      lockPasswd: '',
      passwdError: false,
      pass: false,
      mindate: '',
      monthdate: '',
      flag: false,
      time: ''
    }
  },
  computed: {
    platformName() {
      return this.$store.state.settings.platformName
    },
    footerText() {
      return this.$store.state.settings.footerText
    },
    themecolor: {
      get() {
        return this.$store.state.settings.theme
      }
    },
    headPortraits() {
      return this.$store.state.user.avatar
    }

  },
  created() {
    // var week = ''
    // var d = new Date()
    // var min = dateFormat(d).toString()
    // var month = min.split(' ')[0]
    // this.mindate = min.split(' ')[1]
    // var isWeek = d.getDay()
    // if (isWeek === 0) {
    //   week = '星期日'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // } else if (isWeek === 1) {
    //   week = '星期一'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // } else if (isWeek === 2) {
    //   week = '星期二'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // } else if (isWeek === 3) {
    //   week = '星期三'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // } else if (isWeek === 4) {
    //   week = '星期四'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // } else if (isWeek === 5) {
    //   week = '星期五'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // } else if (isWeek === 6) {
    //   week = '星期六'
    //   this.monthdate = month.split('-')[1] + '月' + month.split('-')[2] + '日,' + week
    // }
    this.getCurrentDate()
  },
  mounted() {},
  methods: {
    getCurrentDate() {
      const now = new Date()
      const year = now.getFullYear() // 获取年份
      let month = now.getMonth() // 获取月份
      let date = now.getDate() // 获取日期
      const day = now.getDay() // 获取周几
      let hour = now.getHours() // 获取小时
      let minu = now.getMinutes() // 获取分钟
      let sec = now.getSeconds() // 获取秒
      let MS = now.getMilliseconds() // 获取毫秒
      let week = ''
      month += 1
      if (month < 10) month = `0${month}`
      if (date < 10) date = `0${date}`
      if (hour < 10) hour = `0${hour}`
      if (minu < 10) minu = `0${minu}`
      if (sec < 10) sec = `0${sec}`
      if (MS < 100)MS = `0${MS}`
      const arr_week = new Array(['周日', '周一', '周二', '周三', '周四', '周五', '周六'])
      week = arr_week[day]
      // let time = ''
      this.time = `${year}年${month}月${date}日` + ` ${week} ${hour}:${minu}:${sec}`
      // 获取当前日期的函数的执行间隔时间，每1000毫秒刷新一次。
      // const timer = setTimeout(() => { this.getCurrentDate() }, 1000)
    },
    handleLogout() {
      this.$confirm('是否退出登录？', '退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        await this.$store.dispatch('user/logout')
        this.$router.push('/login')
      }).catch(() => {
        // 取消
      })
    },
    handleLogin() {
      checkPwd(encryption({ data: { password: this.passwd } })).then((res) => {
        if (decryption(res.data)) {
          this.$store.state.isLock = false
          localStorage.setItem('isLock', false)
          this.$store.commit('user/CLEAR_LOCK', false)
          this.$router.push(`${this.$route.query.redirect}`)
        }
      })
      // if (this.passwd !== this.lockPasswd) {
      //   this.passwd = '123456'
      //   this.$message({
      //     message: '解锁密码错误,请重新输入',
      //     type: 'error'
      //   })
      //   this.passwdError = true
      //   setTimeout(() => {
      //     this.passwdError = false
      //   }, 1000)
      //   return
      // }
      // this.pass = true
      // setTimeout(() => {
      //   this.$store.state.isLock = false
      //   localStorage.setItem('isLock', false)
      //   this.$store.commit('user/CLEAR_LOCK', false)
      //   this.$router.push('/dashboard')
      // }, 1000)
    }
  }
}
</script>
<style lang="scss">
.lockc{
    background-image: url("../../assets/filecover.png");
    background-size: 100% 100%;
    // background-position: 0% -70px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .locktitle{
      width: 526px;
      margin:10% auto 0px;
      display: block;
      font-size: 40px;
      color: #FFFFFF;
      text-align: center;
    }
    .bottomtext{
      position: fixed;
      bottom: 20px;
      text-align: center;
      width: 100%;
      font-size: 12px;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 14px;
    }
    .lockbox{
      width: 500px;
      height: 446px;
      margin: 50px auto;
      background-image: url("../../assets/lockbox.png");
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 50px;
      box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
      border-radius: 25px;
      .locktip{
      margin:50px auto 50px;
      text-align: center;
      font-size: 24px;
      font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
      font-weight: 500;
      color: #EAEFFF;
     }
    .logout{
      text-align: center;
      display: block;
      font-size: 14px;
      margin: 30px auto 66px;
      color: #EAEFFF;
    }
    .datatime{
      height: 38px;
      font-size:22px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 38px;
      text-align: center;
    }

    .lockinputbox{
      display:flex;
      align-items: center;
      justify-content: center;
      &>img{
        width: 64px;
        height:64px;
        border-radius: 50%;
        margin-right: 10px;
        border: 1px solid var(--themecolor);
        cursor: pointer;
      }
      &>.el-input.show{
        width: 280px;
        height: 40px;
        display: block;
        transition: width 0.2s ;
      }
      &>.el-input{
        width: 0;
        overflow: hidden;
        transition: width 0.2s ;
        input{
          background: rgba(0,0,0,0.1000);
          border-radius: 4px 4px 4px 4px;
          border: none;
          outline: none;
          color: #fff;
          transition: width 2s;
        }
        input::-webkit-input-placeholder { /* WebKit browsers */
          color: white;
        }
        i{
          color: #fff;
          width: 24px;
          height: 24px;
          line-height: 24px;
          border: 1px solid #FFFFFF;
          border-radius: 50%;
          margin: 6px 0;
          cursor: pointer;
        }
        i:hover{
          color: var(--themecolor);
          border: 1px solid var(--themecolor);
        }
      }
    }
    }
    .lockc-date{
      margin: 0px 0px 170px 30px;
      padding-top: 30px;
      &>span{
        font-size: 88px;
      }
      &>p{
        font-size: 24px;
        padding: 0 0 0 13px;
      }
    }
  .lock-container {
    // height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .lock-form {
    width: 300px;
  }
}
// @media (max-width:1024px) {
//   .chart-wrapper {
//     padding: 8px;
//   }
//   .cardcss{
//     padding:0!important;
//   }

// }
@media (max-width:550px) {
  .lockc{
    .locktitle{
      width: 300px;
      margin:13% auto 0px;
    }

    .lockbox{
      background: none;
      width: 350px;
      padding: 20px;
      .locktip{
        font-size: 18px;
      }
      .datatime{
        font-size: 18px;
      }
    }
  }

}
</style>
